<script setup>
import { ref, onMounted } from 'vue'
import _axios from "/src/utils/myAxios.js"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()
//文章列表查询条件
let searchArticle = ref({
    title: undefined,
    summary: undefined
})

//存储查询文章的容器
let article = ref([])
let current = ref(1)
let size = ref(10)
let articleIds = ref([]) //用来存储批量删除的文章的id
let total = ref(0)

//获取文章
async function getArticle() {
    let resp = await _axios.post('/api/article/listAllArticle', {
        current: current.value,
        size: size.value,
        title: searchArticle.value.title,
        summary: searchArticle.value.summary
    })
    if (resp.data.code === 200) {
        article.value = resp.data.data.rows
        total.value = resp.data.data.total
    } else {
        ElMessage({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}

//改变文章状态
function changeStatus(a) {
    const text = a.status === '0' ? '发布' : '草稿'
    ElMessageBox.confirm(
        '确认要将 ' + '' + a.title + ' 这篇文章变成 ' + text + ' 状态吗',
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        return _axios.put('/api/article/updateStatus', {
            id: a.id,
            status: a.status
        })

    })
        .then(() => {
            ElMessage({
                showClose: true,
                message: "成功转变为" + text + "状态",
                type: 'success',
                appendTo: "#app",
            })
        })
        .catch(() => {
            a.status = a.status === '0' ? '1' : '0'
        })
}

function handleAdd() {
    router.push("/backWrite")
}

//删除单个文章
async function delArticle(id) {
    ElMessageBox.confirm(
        '确认要删除该文章吗？',
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        let resp = await _axios.delete(`/api/article/deleteArticle/${id}`)
        return resp
    }).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage({
                showClose: true,
                message: "删除成功",
                type: 'success',
                appendTo: "#app",
            })
            getArticle()
        }else{
            ElMessage({
                showClose: true,
                message: resp.data.message,
                type: 'warning',
                appendTo: "#app",
            })
        }
    })
}

function changeArticleId(selection) {
    articleIds.value = selection.map(item => item.id)
}

async function delBatchArticel() {
    ElMessageBox.confirm(
        '确认要删除吗？',
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        return _axios.delete(`/api/article/deleteBatchArticle/${articleIds.value}`)
    })
        .then((resp) => {
            if (resp.data.code === 200) {
                ElMessage({
                    showClose: true,
                    message: "删除成功",
                    type: 'success',
                    appendTo: "#app",
                })
                getArticle()
            }else{
                ElMessage({
                    showClose: true,
                    message: resp.data.message,
                    type: 'warning',
                    appendTo: "#app",
                })
            }
        })
}

onMounted(() => {
    getArticle()
})
</script>

<template>
    <div class="backMain">
        <el-form>
            <div class=" backMain-search">
                <el-form-item label="文章标题">
                    <el-input v-model="searchArticle.title" placeholder="请输入文章标题" />
                </el-form-item>
                <el-form-item label="文章摘要">
                    <el-input v-model="searchArticle.summary" placeholder="请输入文章摘要" />
                </el-form-item>
                <el-button type="primary" style="margin-left: 15px;" @click="getArticle()">搜索</el-button>
            </div>
            <div class="addAndDel">
                <el-button type="primary" plain size="small" @click="handleAdd()">
                    <el-icon>
                        <iEpPlus />
                    </el-icon>&nbsp;
                    新增
                </el-button>
                <el-button type="warning" plain size="small" @click="delBatchArticel()">
                    <el-icon>
                        <iEpDelete />
                    </el-icon>&nbsp;
                    删除
                </el-button>
            </div>
            <div class="user-content">
                <el-table :data="article" style="width: 100%;margin-top: 10px;" @selection-change="changeArticleId"
                    :cell-style="{ backgroundColor: 'var(--el-page-bg-color)' }">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="文章编号" align="center" />
                    <el-table-column prop="title" label="文章标题" align="center" />
                    <el-table-column prop="summary" label="文章摘要" align="center" />
                    <el-table-column prop="status" label="状态(发布或草稿)" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" active-value='0' inactive-value='1'
                                @change="changeStatus(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center" />
                    <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <a :href="'#/backWrite?articleId=' + scope.row.id">
                                <el-button text style="color: #409EFF">编辑</el-button>
                            </a>
                            <el-button text style="color: #409EFF" @click="delArticle(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-form>
        <div>
            <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
                size="small" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getArticle"
                @current-change="getArticle" />
        </div>
    </div>
</template>

<style scoped></style>